<!-- /*
 * @Author: 谢力 843926058@qq.com
 * @Date:   2019-11-06
 * @Last Modified by:   谢力
 * @Last Modified time: 2019-11-07
 */ -->
<template>
    <div class="ui-mode-container ui-mode-box flex-col">
        <div class="ui-header-item gradient">
            <div class="ui-header-arraw prev" @click="handleHistory" @touchstart.stop>
                <i class="iconfont icon iconjiantou-zuo-cuxiantiao"></i>
            </div>
            <div v-if="$route.query.type === '1'" class="ui-header-title">编辑地址</div>
            <div v-else class="ui-header-title">新增地址</div>
        </div>
        <div class="ui-mode-content flex1 mar-bottom-20 font7" id="container" ref="scroll" v-if="pageStatus">
            <form id="forms" class="relative">
                <div class="mt-panel-wrap">
                    <div class="mt-panel-item flex-row align-center-row">
                        <div class="mt-item-label">收货人</div>
                        <div class="mt-item-main mt-flex-inner">
                            <input type="text" v-model="addressWarp.receive_name" maxlength="8" placeholder="请填写收货人姓名" id="userName" class="mt-item-input" />
                        </div>
                    </div>
                    <div class="mt-panel-item flex-row align-center-row">
                        <div class="mt-item-label">手机号码</div>
                        <div class="mt-item-main mt-flex-inner">
                            <input type="tel" v-model="addressWarp.phone_user" maxlength="11" placeholder="请填写手机号码" id="userPhone" class="mt-item-input" />
                        </div>
                    </div>
                    <div class="mt-panel-item flex-row align-between-row align-center-row" @click="show('showArea')">
                        <div class="mt-item-label">所在地区</div>
                        <div class="mt-item-main address flex-row align-end-row align-center-row">
                            <input type="text" readonly ref='addressWrap' placeholder="请选择" id="address" class="mt-item-input_address" />
                            <i class="icon iconfont iconjiantou-you-cuxiantiao"></i>
                        </div>
                    </div>
                    <div class="address-textarea-wrap">
                        <textarea v-model="user_addr" class="address-textarea" id="address_text" maxlength="48" placeholder="请填写详细地址,街道、楼牌号等"></textarea>
                    </div>
                    <div class="mt-panel-item default flex-row align-between-row align-center-row">
                        <div class="mt-item-label">设为默认地址</div>
                        <van-switch v-model="checked" :active-value="0" :inactive-value="1" active-color="#2398aa" inactive-color="#dcdee0"/>
                    </div>
                </div>
                <div  class="submitBtn" @click="submit">保存并使用 </div>
            </form>
		</div>
        <transition name="app_dialog">
            <div class="mt-master-container" v-if="showArea" @click="close('showArea')">
                <div class="mt-master-content" @click.stop>
                    <div class="mt-master-wrap">
                        <div class="mt-master-title">选择省/地区<div class="arrow-wrap flex-row align-center" @click="close('showArea')"><i></i></div></div>
                        <div class="mt-master-info">
                            <van-area
                                ref='areaPicker'
                                title=""
                                confirm-button-text=""
                                cancel-button-text=""
                                visible-item-count=5
                                :area-list="areaList"
                                @change="onChange"
                            />
                        </div>
                        <div class="mt-master-btm" @click="submitArea">确定</div>
                    </div>
                </div>
            </div>
        </transition>
	</div>
</template>
<script>
import Validator from '@/utils/validator';
import mixinCommon from '@/views/content/mixins/common';
import mixinRequest from '@/views/content/mixins/request';
import { areaList } from '@vant/area-data';
import {
    formatDate,
} from '@/utils/tool';
export default {
    data(){
        return {
            public_agent_info: {},
            public_user_info: {},
            checked: 1,
            showArea: false,
            user_addr: '',
            addressWarp: {
                shop_province: '',
                shop_city: '',
                shop_country: '',
                receive_name: '',
                phone_user: ''
            },
            areaList
        };
    },
    mixins:[
        mixinCommon,
        mixinRequest,
    ],
    computed:{
    },
    watch:{
        resourceLoaded:{
            handler(flag){
                flag&&this.$nextTick(this.init);
            },
            immediate:true
        }
    },
    created(){
    },
    mounted(){
    },
    methods:{
        /*
         * 初始化
         */
        init(){
            if (this.$route.query.address_id) {
                this.$http.post({
                    name:'my',
                    data:{
                        invoke_method:'user_and_shop_info'
                    },
                    loading:{
                        enabled:true
                    }
                }).then(({result,response})=>{
                    this.public_agent_info=result.public_agent_info||{};
                    this.public_user_info=result.public_user_info||{};
                    this.getPageInfo({
                        loading:true,
                        name:'my.address.detail',
                        param:{
                            invoke_method:'user_addr_list',
                            id_public_user_address: this.$route.query.address_id
                        }
                    }).then(({result,response})=>{
                        var addr_info=result.page_content[0];
                        if (addr_info.shop_province && addr_info.shop_country && addr_info.shop_city) {
                            this.$refs.addressWrap.value = addr_info.shop_province + ' ' + addr_info.shop_country + ' ' + addr_info.shop_city;
                        } else {
                            this.$refs.addressWrap.value = '请选择';
                        }
                        if (addr_info.addr_desc !== '请更新送货地址') {
                            this.user_addr = addr_info.addr_desc;
                        } else {
                            this.user_addr = '';
                        }
                        this.checked = addr_info.is_default_addr;
                        this.addressWarp.phone_user = addr_info.phone_user;
                        this.addressWarp.receive_name = addr_info.receive_name;
                    }).catch(({msg})=>{
                        this.showMessage(msg);
                    });
                }).catch(({msg})=>{
                    this.showMessage(msg);
                });
            } else {
                this.getPageInfo({
                    loading:true,
                    name:'my',
                    param:{
                        invoke_method:'user_and_shop_info'
                    }
                }).then(({result,response})=>{
                    this.public_agent_info=result.public_agent_info||{};
                    this.public_user_info=result.public_user_info||{};
                }).catch(({msg})=>{
                    this.showMessage(msg);
                });
            }
        },
        /*
         * 提交
         */
		submit() {
            if(!(Validator({value:document.getElementById('userName').value,type:'required'}))){
                this.showToast('请输入收件人名称');
                return;
            }
            if(!(Validator({value:document.getElementById('userPhone').value,type:'tellphone'}))){
                this.showToast('手机号码不正确');
                return;
            }
            if(!(Validator({value:document.getElementById('address').value,type:'required'}))){
                this.showToast('请选择收件地址');
                return;
            }
            if(!(Validator({value:document.getElementById('address_text').value,type:'required'}))){
                this.showToast('请填写收件详细地址');
                return;
            }
            this.loading=this.$$loading({
                text:'加载中...'
            });
            if(!this.sending){
                if (this.$route.query.address_id) {
                    if (this.$route.query.orderId) {
                        this.$http.post({
                            name:'my.address.edit',
                            data:{
                                invoke_method: 'user_insert_or_update_addr',
                                id_public_agent_info: this.public_agent_info.id_public_agent_info,
                                agent_name: this.public_agent_info.agent_name,
                                shop_province: this.addressWarp.shop_province,
                                shop_city: this.addressWarp.shop_city,
                                shop_country: this.addressWarp.shop_country,
                                receive_name: this.addressWarp.receive_name,
                                phone_user: this.addressWarp.phone_user,
                                addr_desc: this.addressWarp.shop_province + this.addressWarp.shop_city + this.addressWarp.shop_country + this.user_addr,
                                is_default_addr: this.checked,
                                pre_db_para_id_public_user_address: this.$route.query.address_id
                            },
                            loading:{
                                enabled:false
                            }
                        }).then(({result, respone}) => {
                            this.loading&&this.loading.close();
                            this.showToast('编辑成功',true);
                            this.$router.push({
                                path: '/category/shopping',
                                query: {
                                    id: this.$route.query.orderId
                                }
                            })
                        }).catch(({msg})=>{
                            this.loading&&this.loading.close();
                            this.showMessage(msg);
                        });
                    } else {
                        this.$http.post({
                            name:'my.address.edit',
                            data:{
                                invoke_method: 'user_insert_or_update_addr',
                                id_public_agent_info: this.public_agent_info.id_public_agent_info,
                                agent_name: this.public_agent_info.agent_name,
                                shop_province: this.addressWarp.shop_province,
                                shop_city: this.addressWarp.shop_city,
                                shop_country: this.addressWarp.shop_country,
                                receive_name: this.addressWarp.receive_name,
                                phone_user: this.addressWarp.phone_user,
                                addr_desc: this.addressWarp.shop_province + this.addressWarp.shop_city + this.addressWarp.shop_country + this.user_addr,
                                is_default_addr: this.checked,
                                pre_db_para_id_public_user_address: this.$route.query.address_id
                            },
                            loading:{
                                enabled:false
                            }
                        }).then(({result, respone}) => {
                            this.loading&&this.loading.close();
                            this.showToast('编辑成功',true);
                            this.$router.replace({
                                path:'/my/address'
                            });
                        }).catch(({msg})=>{
                            this.loading&&this.loading.close();
                            this.showMessage(msg);
                        });
                    }
                } else {
                    this.$http.post({
                        name:'my.address.insert',
                        data:{
                            invoke_method: 'user_insert_or_update_addr',
                            id_public_agent_info: this.public_agent_info.id_public_agent_info,
                            agent_name: this.public_agent_info.agent_name,
                            shop_province: this.addressWarp.shop_province,
                            shop_city: this.addressWarp.shop_city,
                            shop_country: this.addressWarp.shop_country,
                            receive_name: this.addressWarp.receive_name,
                            phone_user: this.addressWarp.phone_user,
                            addr_desc: this.addressWarp.shop_province + this.addressWarp.shop_city + this.addressWarp.shop_country + this.user_addr,
                            is_default_addr: this.checked,
                            type_attribute: 1
                        },
                        loading:{
                            enabled:false
                        }
                    }).then(({result, respone}) => {
                        this.loading&&this.loading.close();
                        this.showToast('新增成功',true);
                        if (this.$route.query.orderId) {
                            this.$router.push({
                                path: '/category/shopping',
                                query: {
                                    id: this.$route.query.orderId
                                }
                            })
                        } else {
                            this.$router.replace({
                                path:'/my/address'
                            });
                        }
                    }).catch(({msg})=>{
                        this.loading&&this.loading.close();
                        this.showMessage(msg);
                    });
                }
            }
        },
        submitArea(){
            let val=this.$refs.areaPicker.getValues();
            this.$refs.addressWrap.value=val[0].name+' '+val[1].name+' '+val[2].name;
            this.addressWarp.shop_province = val[0].name;
            this.addressWarp.shop_country = val[1].name;
            this.addressWarp.shop_city = val[2].name;
            this.close('showArea');
        },
        /*
         * 打开弹窗
         */
        show(key){
            this[key]=true;
        },
        /*
         * 关闭弹窗
         */
        close(key){
            this[key]=false;
        }
    },
    components:{
    },
    beforeDestroy(){
    }
}
</script>
<style lang="less" scoped>
.van-cell {
    border-bottom: 1px solid #e3e3e3;
}
.van-ellipsis {
    height: 0.64rem;
    line-height: 0.64rem;
}
.ui-mode-container{
    background:#F6F6F6;
}
#forms{
    padding:0;
    .mt-panel-wrap{
        margin-top:.85rem;
        padding-left:.85rem;
        background:#fff;
        .mt-panel-item{
            height:3.14rem;
            padding:.5rem .64rem .5rem 0;
            line-height:1.2em;
            &.default{
                height:2.48rem;
                padding:0 .8rem 0 0;
            }
            .mt-item-input{
                padding:0;
                background:#FFF;
                color:#000;
                text-align:right;
            }
        }
        .mt-item-label{
            width:18%;
            margin-bottom:0;
        }
        .mt-item-main{
            width:82%;
        }
        .mt-item-input{
            color:#212121;
            text-align:left;
            &:disabled{
                color:#ccc;
            }
            &:readonly{
                color:#212121;
            }
        }
        .mt-item-input_address{
            margin-right:.64rem;
            height:2rem;
            color:#9b9b9b;
            float:left;
            box-sizing:border-box;
            border:none;
            font-size:0.8rem;
            text-align: right;
        }
        .mt-panel-item:last-child:after{
            background:#fff;
        }
        .address-textarea-wrap{
            width:100%;
            height:4.64rem;
            padding:.85rem .85rem .85rem 0;
            border:none;
            border-bottom:1px solid #EEE;
            line-height:1.2em;
            .address-textarea{
                display:block;
                width:100%;
                height:100%;
                border:none;
                font-size:.75rem;
            }
        }
    }
}
.submitBtn{
    display:block;
    height:2.35rem;
    margin:1.92rem .85rem 0 .85rem;
    line-height:2.4rem;
    font-size:.75rem;
    color:#fff;
    text-align:center;
    background:#2398aa ;
}
.mt-master-container{
    position:fixed;
    z-index:11;
    background-color:rgba(0,0,0,0.5);
    left:50%;
    width:100%;
    max-width:20rem;
    top:0;
    bottom:0;
    transform:translateX(-50%);
    .mt-master-content{
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        z-index:12;
        line-height:1.2em;
        text-align:center;
        font-size:.58rem;
        color:#222;
        background:#fff;
        .mt-master-btm{
            margin:.85rem;
            height:2.34rem;
            background: #2398aa;
            line-height:2.34rem;
            color:#FFF;
            font-size:.75rem;
            font-weight:900;
        }
    }
    .mt-master-title{
        position:relative;
        height:2.82rem;
        line-height:2.82rem;
        font-size:.75rem;
        font-weight:900;
        .arrow-wrap{
            position:absolute;
            right:0;
            top:0;
            width:2.66rem;
            height:100%;
            i{
                display: block;
                width:.67rem;
                height:.67rem;
                background-size:100%;
                background-position:center;
                background-repeat:no-repeat;
                background-image:url(~@/assets/images/shopping_deleted_icon.png);
            }
        }
    }
    .mt-master-info{
        min-height:11.5rem;
        .mt-master-item{
            width:100%;
            height:3.12rem;
            padding:0 .85rem;
            border-bottom:1px solid #EEE;
            font-size:.75rem;
            font-weight:900;
            &:last-child{
                border-bottom:none;
                .mt-master-key{
                    i{
                        // background-image:url(~@/assets/images/common_offline_icon.png);
                    }
                }
            }
            .mt-master-key{
                i{
                    display: block;
                    margin-right:.64rem;
                    width:1.01rem;
                    height:1.01rem;
                    background-size:100%;
                    background-position:center;
                    background-repeat:no-repeat;
                    // background-image:url(~@/assets/images/common_wechat_pay_icon.png);
                }
                &:last-child i{
                    // background-image:url(~@/assets/images/common_offline_icon.png);
                }
            }
            .mt-master-ckeck{
                width:.8rem;
                height:.8rem;
                border:1px solid #6F7072;
                &.checked{
                    display: block;
                    border:none;
                    background-size:100%;
                    background-position:center;
                    background-repeat:no-repeat;
                    background-image:url(~@/assets/images/common_selected_icon.png);
                }
            }
        }
    }
    &.app_dialog-enter-active,&.app_dialog-leave-active{
        transition:all ease-out 0.3s;
		.mt-master-content{
			transition:all ease-out 0.3s;
		}
    }
    &.app_dialog-enter{
        opacity: 0;
		.mt-master-content{
			opacity: 0;
			transform: translateY(0%);
		}
    }
    &.app_dialog-enter-to,.app_dialog-leave{
        opacity: 1;
		.mt-master-content{
			opacity: 1;
			transform: translateY(0%);
		}
    }
    &.app_dialog-leave-to{
        opacity: 0;
		.mt-master-content{
			opacity: 0;
			transform: translateY(0%);
		}
    }
}

input::-webkit-input-placeholder{
    color: #DEDEDF;
}
input:-moz-placeholder {
    color: #DEDEDF;
}
input::-moz-placeholder {
    color: #DEDEDF;
}
input:-ms-input-placeholder {
    color: #DEDEDF;
}
textarea::-webkit-input-placeholder {
    color: #DEDEDF;
}
textarea:-moz-placeholder {
    color: #DEDEDF;
}
textarea::-moz-placeholder {
    color: #DEDEDF;
}
textarea::-ms-input-placeholder {
    color: #DEDEDF;
}
</style>
<style>
.van-picker__toolbar{
    display:none;
}
.van-picker-column .van-picker-column__item .van-ellipsis{
    line-height:1.2em;
}
</style>
